<template>
  <div class="fetch-form">
    <component
      :is="dynamicCompName"
      v-if="dynamicCompName"
      v-bind="{
        formData: formData,
        widgetType: widgetType,
        tableColumns: tableColumns,
        datasetList: datasetList,
        projectId: projectId,
        chartType: chartType,
      }"
      @change="
        (widgetInfo, extraFormData) =>
          $emit('change', widgetInfo, extraFormData)
      "
    />
    <a-form
      v-else
      :form="form"
      :label-col="{ span: labelCol }"
      :wrapper-col="{ span: wrapperCol }"
    >
      <div class="panel">
        <a-form-item label="数据集" class="dataset-div">
          <a-select
            v-if="
              widgetType === widgetTypeEnum.system ||
              datasetList.datasetSelectEnable === true
            "
            v-decorator="['id']"
            size="small"
            placeholder="请选择"
            v-bind="commonFormProps"
            @change="handleDatasetChange"
          >
            <a-select-option v-for="item in datasetList.dataset" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <div v-else class="dataset-name">
            {{ datasetName }}
          </div>
        </a-form-item>
        <div>
          <slot name="chartTypeSlot"> </slot>
        </div>

        <div
          v-if="chartType !== 'peopleHeatMap'"
          class="panel-title"
          @click="showFlag = !showFlag"
        >
          <div class="panel-title-hr"></div>
          数据
          <a-icon :type="showFlag ? 'down' : 'right'" />
        </div>
        <div v-show="showFlag && chartType !== 'peopleHeatMap'">
          <!-- 用 v-show 获取表单数据依旧能获取这一项的值 -->
          <a-form-item v-show="!isDisableAggr" label="聚合查询">
            <a-switch
              v-decorator="['isAggr', { valuePropName: 'checked' }]"
              v-bind="commonFormProps"
              size="small"
            />
          </a-form-item>
          <a-form-item
            v-show="isShowLabelKeyFormItem"
            :label="hasYLabelKeyObj ? `维度(x)` : labelKeyLabel"
          >
            <column-select
              v-decorator="[
                'labelKeyObj',
                {
                  initialValue: { sort: '' },
                },
              ]"
              v-bind="commonFormProps"
              :options="getObjOptions('labelKeyObj')"
              @sortChange="onSortChange('labelKeyObj')"
              @change="handleLabelKeyChange"
            />
          </a-form-item>
          <a-form-item v-if="hasYLabelKeyObj" label="维度(y)">
            <column-select
              v-decorator="[
                'yLabelKeyObj',
                {
                  initialValue: {},
                },
              ]"
              v-bind="commonFormProps"
              :options="getObjOptions('yLabelKeyObj')"
              @sortChange="onSortChange('yLabelKeyObj')"
            />
          </a-form-item>
          <a-form-item :label="valueKeyLabel">
            <multiple-select
              v-decorator="['valueKeyObjList']"
              v-bind="commonFormProps"
              :options="getObjOptions('valueKeyObjList')"
              :is-single="isValueKeySingle"
              :is-sortable="isValueKeySortable"
              :form-data="form.getFieldsValue()"
              @sortChange="onSortChange('valueKeyObjList')"
            />
          </a-form-item>
          <a-form-item
            v-if="chartType === 'scatterplot' || chartType === 'wordCloud'"
            :label="groupByLabel"
          >
            <a-select
              v-decorator="['groupBy']"
              size="small"
              v-bind="commonFormProps"
              allow-clear
            >
              <a-select-option
                v-for="item in datasetTableColumn"
                :key="`${item.name}`"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <div v-if="hasConfidenceObj">
            <a-form-item label="上界">
              <multiple-select
                v-decorator="['confidenceUpperBoundObjList']"
                v-bind="commonFormProps"
                :options="getObjOptions('confidenceUpperBoundObjList')"
                :is-single="true"
                :is-sortable="false"
                :form-data="form.getFieldsValue()"
              />
            </a-form-item>
            <a-form-item label="下界">
              <multiple-select
                v-decorator="['confidenceLowerBoundObjList']"
                v-bind="commonFormProps"
                :options="getObjOptions('confidenceLowerBoundObjList')"
                :is-single="true"
                :is-sortable="false"
                :form-data="form.getFieldsValue()"
              />
            </a-form-item>
          </div>
          <a-form-item v-show="showDiscreteColTopN" label="TopN">
            <a-input-number
              v-decorator="[
                'topN',
                {
                  initialValue: defaultFormData.topN,
                  trigger: 'blur',
                },
              ]"
              size="small"
              :min="1"
              :max="10000"
              @pressEnter="($event) => $event.target.blur()"
            ></a-input-number>
          </a-form-item>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script lang="ts">
/**
 * 1、根据projectId查询加载的全部数据集名称（供选择数据集用，仅限于上传的）
 * 2、查询数据集名称（仅针对pipeline节点）
 * 3、根据前面的数据集信息查询列名 + 数据
 * 4、pipeline 相关的chart数据需要隐藏或者disable部分配置
 */
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
import {
  dynamicCompMaps,
  IKeyValue,
  widgetTypeEnum,
} from '@/components/common/VisualizationDashboard/util'
import {
  IDatasetList,
  IColumn,
  IWidgetJson,
  IWidgetInfo,
} from '@/components/common/VisualizationDashboard/interface'
import { queryWidgetColumn } from '@/api/widget'
import MultipleSelect from '@/components/form/multiple-select.vue'
import ColumnSelect from '@/components/common/VisualizationDashboard/CustomizeComponent/ColumnSelect.vue'
import TableFetchForm from '@/components/common/VisualizationDashboard/TableFetchForm.vue'
import FormRenderStore from '@/store/modules/form-render'
import { isEqual, cloneDeep } from 'lodash'
import { isAggrStatus } from '@/config/contant'

interface ITool {
  name: string
  status: 'edit' | 'readonly' | 'disable' | 'hide'
}

interface ILabelKeyObj {
  value: string
  sort: '' | 'asc' | 'desc'
}

interface IValueKeyObj {
  value: string
  func: string
  sort: '' | 'asc' | 'desc'
}

const datasetTableColumnCache: any = {} // 数据集列信息的缓存{id: tableColumns}

@Component({
  components: {
    MultipleSelect,
    ColumnSelect,
    TableFetchForm,
  },
})
export default class FetchForm extends Vue {
  // 包含两种类型的panel，用type区分：fetch(和数据获取相关)、property(和图表属性配置相关)
  @Prop({ default: () => [] }) tools!: (string | ITool)[]
  // @Prop({ default: () => ({}) }) queryParameters!: IQueryParameters
  @Prop({ default: () => [] }) datasetList!: IDatasetList // 数据集列表
  @Prop() chartType!: string // 图表类型
  @Prop({ default: '' }) widgetType!: 'system' | 'pipeline' | 'dataset' // system-系统组件 pipeline - pipeline组件
  @Prop({ default: '' }) projectId!: '' // 项目id，查询数据集相关列时校验权限用

  @Prop({ default: () => [] }) panelList!: IKeyValue[]
  @Prop({ default: () => [] }) tableColumns!: IColumn[]
  @Prop({
    type: Number,
    required: false,
    default() {
      return 8
    },
  })
  labelCol!: number

  @Prop({
    type: Number,
    required: false,
    default() {
      return 16
    },
  })
  wrapperCol!: number

  @Prop({
    type: Object,
    required: true,
    default(): IKeyValue {
      return {}
    },
  })
  formData!: IWidgetInfo | IKeyValue

  private form: any
  private commonFormProps = {
    size: 'small',
    disabled: this.formData.type === 'recommend',
  }
  private widgetTypeEnum = widgetTypeEnum // widget 类型：系统组件、pipeline组件，目前只有系统组件会传该字段
  private datasetTableColumn: IColumn[] = []
  private defaultFormData = {
    isAggr: isAggrStatus.DEFAULT,
    topN: this.chartType === 'pieChart' ? 10000 : 1000,
    groups: '',
    labelKeyObj: {
      value: '',
      sort: '',
      desc: '',
    },
    yLabelKeyObj: {
      value: '',
      sort: '',
    },
    valueKeyObjList: [
      {
        // 用于getData查询的，和chart的valueKey不一样
        value: '',
        func: 'sum',
        sort: '',
      },
    ],
    confidenceLowerBoundObjList: [
      {
        value: '',
        func: 'sum',
      },
    ],
    confidenceUpperBoundObjList: [
      {
        value: '',
        func: 'sum',
      },
    ],
  }
  private isValueKeySingle: boolean = false
  private isValueKeySortable: boolean = true
  private hasYLabelKeyObj: boolean = false
  private hasConfidenceObj: boolean = false

  private oldData: any = null // 记录旧数据用于比对

  private showFlag: boolean = true // 是否展开面板
  private disableAggrChart = new Set(['gaugeChart', 'wordCloud']) // 禁止聚合查询功能的chart

  private queryColumnParams = {
    curPage: 1,
    pageSize: 5,
    projectId: this.projectId,
  }

  private showDiscreteColTopN: any = null

  beforeCreate() {
    this.form = this.$form.createForm(this, {
      name: 'fetchForm',
      onFieldsChange: () => {
        this.onFormFieldChange()
      },
    })
  }

  private get dynamicCompName() {
    if (this.chartType === 'table') {
      return 'table-fetch-form'
    }
    // if (GRAPH_ARRAY.includes(this.chartType)) {
    //   return 'graph-fetch-form'
    // }
    return ''
  }

  /**
   * 数据集名称
   */
  private get datasetName() {
    if (this.formData.type === 'recommend') {
      return '推荐数据'
    }
    //  知识图谱无datasetList
    if (
      this.widgetType !== widgetTypeEnum.system &&
      Object.keys(this.datasetList).length > 0
    ) {
      const target =
        // @ts-ignore
        this.datasetList[this.widgetType].filter(
          (list: any) => list.id === this.formData.id
        )[0] || {}
      return target.name || ''
    }
    return ''
  }

  /**
   * 维度字段的label名
   * 大部分情况下为维度，少部分chart会用别的名
   */
  private get labelKeyLabel() {
    if (this.chartType === 'wordCloud') {
      return '词文本'
    }
    return '维度'
  }

  /**
   * 度量字段的label名
   * 大部分情况下为度量，少部分chart会用别的名
   */
  private get valueKeyLabel() {
    if (this.chartType === 'wordCloud') {
      return '词权重'
    }
    return '度量'
  }

  /**
   * 分组字段的label名
   * 大部分情况下为分组字段，少部分chart会用别的名
   */
  private get groupByLabel() {
    if (this.chartType === 'wordCloud') {
      return '词色'
    }
    return '分组字段'
  }

  /**
   * 是否禁用聚合查询功能
   */
  private get isDisableAggr() {
    return this.disableAggrChart.has(this.chartType)
  }

  /**
   * 是否显示维度字段
   */
  private get isShowLabelKeyFormItem() {
    return !['gaugeChart'].includes(this.chartType)
  }

  private getObjOptions(key: any) {
    const formValues = this.form.getFieldsValue() // Todo valueKey 不是简单的一个值，还包含排序、聚合方法等
    const oKeys = Object.keys(formValues).filter(
      (k: string) => k !== key && k.endsWith('Obj')
    )
    const lKeys = Object.keys(formValues).filter(
      (k: string) => k !== key && k.endsWith('ObjList')
    )

    let columns = this.datasetTableColumn
    if (key === 'valueKeyObjList') {
      // 度量只能选择数值型
      columns = columns.filter(
        (column) => column.desc === 'int' || column.desc === 'decimal'
      )
    }

    return columns.map((column) => ({
      value: column.name,
      text: column.name,
      desc: column.desc,
      disabled:
        oKeys.some((oKey: string) => formValues[oKey]?.value === column.name) ||
        lKeys.some((lKey: string) =>
          (formValues[lKey] || []).some((v: any) => v.value === column.name)
        ),
    }))
  }

  // 更改 chartType 后重置 form
  @Watch('chartType', { immediate: true })
  private onChartTypeChange() {
    if (this.chartType === 'table' || this.dynamicCompName) {
      return
    }
    // 只有一个度量值的chartType
    const singleChartType = [
      'barChart',
      'scatterplot',
      'heatmapMatrix',
      'pieChart',
      'donutChart',
      // 'areaChart', // 多个度量时为堆叠面积图
      'bubbleScatterChart',
      'wordCloud',
    ]
    this.isValueKeySingle = singleChartType.some((s) => this.chartType === s)

    // 度量值可以sort的chartType
    const unSortableChartType = ['lineChart', 'areaChart', 'areaRangeChart']
    this.isValueKeySortable = !unSortableChartType.some(
      (s) => this.chartType === s
    )

    /*
    // 应在commmon/VisualizationDashboard/util.ts中做通用处理 暂不做处理
    // 必须给出label的sort方式的chartType
    const fixedLabelSortChartType = [
      'lineChart',
      'areaRangeChart',
      'areaChart',
    ]
    if(fixedLabelSortChartType.some((s) => this.chartType === s)) {
      this.defaultFormData.labelKeyObj.sort = 'asc'
    }
    */

    const hasYChartType = ['heatmapMatrix']
    this.hasYLabelKeyObj = hasYChartType.some((s) => this.chartType === s)

    const hasConfidenceType = ['areaRangeChart']
    this.hasConfidenceObj = hasConfidenceType.some((s) => this.chartType === s)
    // 1、拖入系统组件的case
    // 2、面积折线图，上下界
    if (this.formData.id === undefined || this.chartType === 'areaRangeChart') {
      this.setFormData()
    }
  }

  @Watch('formData', { immediate: true, deep: true })
  private onFormDataChange(newValue: IKeyValue, oldValue: IKeyValue) {
    const parsedBefore = this.convertWidgetJsonToFormData(newValue.widgetJson)
    const parsedAfter = this.convertWidgetJsonToFormData(oldValue?.widgetJson)
    if (
      !newValue?.id ||
      (newValue?.id === oldValue?.id &&
        newValue?.type === oldValue?.type &&
        isEqual(parsedBefore, parsedAfter)) ||
      this.chartType === 'table' ||
      this.dynamicCompName
    ) {
      return
    }
    // console.log('onFormDataChange', oldValue, newValue)
    this.commonFormProps.disabled = this.formData.type === 'recommend'
    this.setFormData()
  }

  /**
   * 获取 KG模块数据集相关列
   */
  private async handleKgDatasetChange(value: string) {
    if (!value) {
      return
    }
    const {
      data: { code, result },
    } = await queryWidgetColumn({
      data: {
        ...this.queryColumnParams,
        id: 0, //  kg 特有
        tableName: value,
        type: 'kg', //  kg 特有
      },
    })

    if (code === 100) {
      this.datasetTableColumn = result.head || []
      FormRenderStore.setColumnList(this.datasetTableColumn)
      datasetTableColumnCache[value] = this.datasetTableColumn
    }
  }

  /**
   * 获取数据集相关列
   */
  private async handleDatasetChange(value: string) {
    if (!value) {
      return
    }
    //  KG模块数据集id case
    if (typeof this.formData.id === 'string') {
      this.handleKgDatasetChange(value)
      return
    }
    // if (datasetTableColumnCache[value]) {
    //   // 缓存中取
    //   this.datasetTableColumn = datasetTableColumnCache[value]
    //   return
    // }
    const {
      data: { code, result },
    } = await queryWidgetColumn({
      data: {
        ...this.queryColumnParams,
        id: +value,
        type: this.formData.type || 'dataset',
      },
    })

    if (code === 100) {
      this.datasetTableColumn = result.head || []
      FormRenderStore.setColumnList(this.datasetTableColumn)
      datasetTableColumnCache[value] = this.datasetTableColumn
    }
  }

  private handleLabelKeyChange(value: IColumn) {
    if (!['int', 'decimal'].includes(value.desc)) {
      this.showDiscreteColTopN = true
    } else {
      this.showDiscreteColTopN = false
    }
  }

  /**
   * 设置表单 form 的值
   */
  private setFormData() {
    const {
      form: { getFieldsValue, setFieldsValue },
      formData,
    } = this
    this.$nextTick(() => {
      const values = getFieldsValue()
      const parsedData = this.convertWidgetJsonToFormData(formData.widgetJson)
      if (values.id === undefined) {
        this.handleDatasetChange(formData.id)
      }
      if (this.isDisableAggr) {
        // 一些chart类型不能聚合
        this.defaultFormData.isAggr = false
        parsedData.isAggr = false
      }
      this.showDiscreteColTopN = !(parsedData.topN === -1)

      const newData: IKeyValue = {
        ...cloneDeep(this.defaultFormData), // 不用cloneDeep会改变this.defaultFormData的值...
        ...{
          id: formData.id,
          ...parsedData,
        },
      }
      const formDataKeysSet = new Set(Object.keys(newData))
      // 设置值时只能设定表单中有的字段
      Object.keys(values).forEach((k) => {
        if (formDataKeysSet.has(k)) {
          // formData 中有对应的key才进行赋值
          values[k] = newData[k]
        }
      })
      // resetFields()
      setFieldsValue(values)
    })
  }

  /**
   * 根据配置获取渲染的组件类型
   */
  private getCompType(item: IKeyValue): string {
    const result = 'a-input'
    if (dynamicCompMaps[item.type]) {
      return dynamicCompMaps[item.type].component
    }
    return result
  }

  /**
   * 获取组件formItem 的 decorator
   * 必须，否则无法注册到form上
   */
  private getDecorator(field: IKeyValue) {
    const options: IKeyValue = {
      initialValue: field.defaultValue,
      trigger: 'blur',
    }
    if (field.type === 'switch') {
      options.valuePropName = 'checked'
    }
    return [field.name, options]
  }

  /**
   * 处理维度和度量的sort发生变化时的联动
   * 保证只实现最新的sort
   */
  private onSortChange(fieldName: string) {
    const fieldsValue = this.form.getFieldsValue()
    if (fieldName === 'labelKeyObj' || fieldName === 'yLabelKeyObj') {
      fieldsValue.valueKeyObjList.forEach((x: any) => {
        x.sort = ''
      })
      this.form.setFields({
        valueKeyObjList: { value: fieldsValue.valueKeyObjList },
      })
    } else {
      fieldsValue.labelKeyObj.sort = ''
      this.form.setFields({ labelKeyObj: { value: fieldsValue.labelKeyObj } })
      if (this.hasYLabelKeyObj) {
        fieldsValue.yLabelKeyObj.sort = ''
        this.form.setFields({
          yLabelKeyObj: { value: fieldsValue.yLabelKeyObj },
        })
      }
    }
  }

  /**
   * formItem 数值变化
   */
  private onFormFieldChange() {
    /*
    const v = this.form.getFieldsValue()
    console.log('onFormFieldChange',v)
     */

    this.form.validateFields((error: any, values: any) => {
      // console.log(values,'??????????????????????????????????????')
      const newValues = {
        ...this.formData,
        ...values,
      }
      const data = {
        id: newValues.id,
        type: newValues.type,
        widgetJson: this.convertFormDataToWidgetJson(newValues),
      }
      // 更改chartType时被拦在这里 所有现在默认更改chartType清空所有配置
      if (isEqual(data, this.oldData)) {
        return
      }
      if (this.oldData?.id && data.id !== this.oldData?.id) {
        // @ts-ignore
        data.widgetJson = {}
      }
      this.oldData = {
        ...data,
      }
      if (!error) {
        this.$emit('change', data)
      }
    })
  }

  /**
   * 从form表单的值转换成widgetJson 数据
   */
  private convertFormDataToWidgetJson(formData: any) {
    // console.log('formData',formData)
    // eslint-disable-next-line unicorn/prevent-abbreviations
    const {
      isAggr,
      labelKeyObj: labelKeyObject = {},
      yLabelKeyObj: yLabelKeyObject,
      valueKeyObjList: valueKeyObjectList = [],

      confidenceLowerBoundObjList,
      confidenceUpperBoundObjList,

      groupBy,
    } = formData
    let { topN } = formData
    if ([false, null].includes(this.showDiscreteColTopN)) {
      topN = -1
    } else if (this.showDiscreteColTopN === true && topN === -1) {
      // 考虑从维度从连续切换到离散，需要重新设置topN，否则会录入上一次的-1
      topN = this.chartType === 'pieChart' ? 10000 : 1000
    }
    const widgetJson: IWidgetJson = {
      isAggr,
      config: {
        topN,
        filters: [],
        keys: labelKeyObject.value
          ? [
              {
                col: labelKeyObject.value,
                values: '',
                filterType: '',
                sort: labelKeyObject.sort,
                desc: labelKeyObject.desc,
              },
            ]
          : [],
        values: valueKeyObjectList.map((data: IValueKeyObj) => {
          if (this.chartType === 'scatterplot') {
            // 散点图度量可选择非数值类型，但是聚合函数只能为count（默认不传就是count）
            const value = {
              col: data.value,
              sort: data.sort,
              aggregate_type: data.func,
              topN,
            }
            const targetColumn = this.datasetTableColumn.filter(
              (column) => column.name === data.value
            )[0]
            if (
              targetColumn &&
              !['decimal', 'int'].includes(targetColumn.desc) &&
              value.aggregate_type !== 'count'
            ) {
              // @ts-ignore
              delete value.aggregate_type
            }
            return value
          }
          return {
            col: data.value,
            sort: data.sort,
            aggregate_type: data.func,
            topN,
          }
        }),
      },
    }
    if (yLabelKeyObject) {
      widgetJson.config.keys.push({
        col: yLabelKeyObject.value,
        values: '',
        filterType: '',
        sort: yLabelKeyObject.sort,
      })
    }
    if (confidenceLowerBoundObjList) {
      widgetJson.config.values.push({
        col: confidenceLowerBoundObjList[0].value,
        sort: '',
        aggregate_type: confidenceLowerBoundObjList[0].func,
        topN,
      })
      widgetJson.config.values.push({
        col: confidenceUpperBoundObjList[0].value,
        sort: '',
        aggregate_type: confidenceUpperBoundObjList[0].func,
        topN,
      })
      widgetJson.config.confidence = {
        lower: confidenceLowerBoundObjList[0],
        upper: confidenceUpperBoundObjList[0],
      }
    }
    if (groupBy) {
      widgetJson.config.groups = [
        {
          col: groupBy,
          values: [],
        },
      ]
    }
    return widgetJson
  }

  /**
   * 从widgetJson值转换成form表单接受的数据
   */
  private convertWidgetJsonToFormData(widgetJson?: IWidgetJson) {
    if (!widgetJson || !widgetJson.config) {
      return {
        isAggr: isAggrStatus.DEFAULT,
        topN: this.chartType === 'pieChart' ? 10000 : 1000,
        groupBy: undefined,
      }
    }
    const {
      isAggr,
      config: { keys, topN, values, groups = [], confidence },
    } = widgetJson
    const data: any = {
      isAggr,
      topN,

      labelKeyObj: {
        value: '',
        sort: '',
        desc: '',
      },
      valueKeyObjList: [
        {
          value: '',
          func: 'sum',
          sort: '',
        },
      ],
    }
    if (keys[0]) {
      data.labelKeyObj = {
        value: keys[0].col,
        sort: keys[0].sort,
        desc: keys[0].desc,
      }
    }
    if (keys[1]) {
      data.yLabelKeyObj = {
        value: keys[1].col,
        sort: keys[1].sort,
      }
    }
    if (values.length > 0) {
      data.valueKeyObjList = values.map((v) => ({
        value: v.col,
        func: v.aggregate_type,
        sort: v.sort,
      }))
    }
    if (groups.length > 0) {
      data.groupBy = groups[0].col
    }
    if (confidence) {
      data.confidenceLowerBoundObjList = [confidence.lower]
      data.confidenceUpperBoundObjList = [confidence.upper]
      data.valueKeyObjList = data.valueKeyObjList.slice(0, -2)
    }

    return data
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-kg-appl-form-item-label {
  text-align: left;
}

/deep/ .ant-kg-appl-form-item.vertical {
  .ant-kg-appl-col {
    width: 100%;
  }
}

/deep/ .ant-kg-appl-form-item {
  margin-bottom: 0;
}

.panel-title {
  font-weight: bolder;
  height: 40px;
  line-height: 40px;
  margin-top: 4px;
  position: relative;
  width: 100%;

  .anticon {
    font-size: 8px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 10px;
  }

  .panel-title-hr {
    background-color: #e9e9e9;
    height: 1px;
    left: -16px;
    position: absolute;
    right: -20px;
  }
}

/deep/ .dataset-div {
  .dataset-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ant-kg-appl-select-disabled {
    color: rgba(0, 0, 0, 0.65);

    .ant-kg-appl-select-selection {
      background-color: #fff;
      border-width: 0;
      cursor: default;

      .ant-kg-appl-select-arrow {
        visibility: hidden;
      }
    }
  }
}

/deep/ .ant-kg-appl-input-number-handler-wrap {
  display: none;
}
</style>
